<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../css/TreeGrid.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="../plugins/jquery-2.1.1.min.js"></script>
    <script src="../plugins/TreeGrid.js" type="text/javascript"></script>
</head>
<body>
	<div class="admin-main">
	<blockquote class="layui-elem-quote">
		<a href="javascript:;" class="layui-btn layui-btn-small" onclick="expandAll('Y')">
					<i class="layui-icon">&#xe625;</i> 展开
		</a>
		<a href="javascript:;" class="layui-btn layui-btn-small" onclick="expandAll('N')">
					<i class="layui-icon">&#xe623;</i> 折叠
		</a>
		<a href="javascript:;" class="layui-btn layui-btn-small" id="addMenu">
					<i class="layui-icon">&#xe608;</i> 添加
		</a>
		<a href="javascript:;" class="layui-btn layui-btn-small">
					<i class="layui-icon">&#xe642;</i> 编辑
		</a>
		<a href="javascript:;" class="layui-btn layui-btn-small">
					<i class="layui-icon">&#xe640;</i> 删除
		</a>
    </blockquote><br>
    <fieldset class="layui-elem-field">
				<legend>菜单数据</legend>
				<div class="layui-field-box layui-form" id="treegrid"></div>
	</fieldset>
	</div>
    <script type="text/javascript" src="../plugins/layui/layui.js"></script>
    <script type="text/javascript">
    
    			var data;
				$.ajax({
                           url : '../datas/treegrid.json',
                           dataType : 'json',
                           async : false,
                           success : function(obj) {
                          	data = obj;
                           }
                       });
        var config = {
            id: "tg1",
            width: "1600",
            renderTo: "treegrid",
            headerAlign: "center",
            headerHeight: "auto",
            dataAlign: "left",
            indentation: "20",
            folderOpenIcon: "../images/collapse.png",
            folderCloseIcon: "../images/expand.png",
            defaultLeafIcon: "../images/file.png",
            hoverRowBackground: "false",
            folderColumnIndex: "0",
            itemClick: "itemClickEvent",
            columns: [
                {headerText: "", headerAlign: "center", dataAlign: "center", width: "20"},
                { headerText: "菜单名称", dataField: "text", headerAlign: "center", handler: "customOrgName",width:"200"},
                { headerText: "菜单图标", dataField: "iconCls", headerAlign: "center", dataAlign: "center", width: "100" },
                { headerText: "菜单地址", dataField: "url", headerAlign: "left", dataAlign: "center"},
                { headerText: "排序", dataField: "seq", headerAlign: "center", dataAlign: "center", width: "100" },
                { headerText: "上级菜单", dataField: "ptext", headerAlign: "center", dataAlign: "center", width: "200"}
            ],
            data:data
        };
        
        /*
        单击数据行后触发该事件
        id：行的id
        index：行的索引。
        data：json格式的行数据对象。
        */
        function itemClickEvent(id, index, data) {
            jQuery("#currentRow").val(id + ", " + index + ", " + TreeGrid.json2str(data));
        }

        /*
        通过指定的方法来自定义栏数据
        */
        function customCheckBox(row, col) {
            return "<input type='checkbox'>";
        }

        function customOrgName(row, col) {
            var name = row[col.dataField] || "";
            return name;
        }

        function customLook(row, col) {
            return "<a href='' style='color:blue;'>查看</a>";
        }

        //创建一个组件对象
        var treeGrid = new TreeGrid(config);
        treeGrid.show();

        /*
        展开、关闭所有节点。
        isOpen=Y表示展开，isOpen=N表示关闭
        */
        function expandAll(isOpen) {
            treeGrid.expandAll(isOpen);
        }

        /*
        取得当前选中的行，方法返回TreeGridItem对象
        */
        function selectedItem() {
            var treeGridItem = treeGrid.getSelectedItem();
            if (treeGridItem != null) {
                //获取数据行属性值
                //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name);

                //获取父数据行
                var parent = treeGridItem.getParent();
                if (parent != null) {
                    //jQuery("#currentRow").val(parent.data.name);
                }

                //获取子数据行集
                var children = treeGridItem.getChildren();
                if (children != null && children.length > 0) {
                    jQuery("#currentRow").val(children[0].data.name);
                }
            }
        }
        //点击【选择上级菜单】
        function allMenu(){
        	alert("aaa");
        }
        
        layui.use(['layer'], function() {
				var $ = layui.jquery,
					layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
					layer = layui.layer;//获取当前窗口的layer对象
					
					$('#addMenu').on('click', function() {
					
					var con = $('#addMenuTable');
					layer.open({
							type: 1,
							title: '添加菜单',
							content: con,
							anim:6,
							skin:'layer-ext-moon',
							btn: ['确定', '取消'],
							area: ['700px', '330px'],
							yes: function(index, layero) {
								//这是核心的代码。
								
								
							},
							shade :[0.5, '#393D49'],
							maxmin :false
						});
				});//addMenu按钮的结束
		});
    </script>
</body>
<div style="padding:10px;" id="addMenuTable" hidden="hidden">
	<table class="layui-table">
		<tr>
			<td>菜单名称</td>
			<td><input id="menuName" type="text" class="layui-input" name="menuName" placeholder="请输入菜单名称"></td>
			<td align="center">排序</td>
			<td><input id="menuOrder" type="number" class="layui-input" name="menuOrder" placeholder="请选择菜单顺序"></td>
		</tr>
		<tr>
			<td>菜单地址</td>
			<td colspan="4"><input id="menuUrl" type="text" class="layui-input" name="menuUrl" placeholder="请填写菜单地址"></td>
		</tr>
		<tr>
			<td>上级菜单</td>
			<td><input id="parentMenu" type="text" class="layui-input" name="parentMenu" placeholder="请选择上级菜单" onclick="allMenu();"></td>
			<td>菜单图标</td>
			<td><input id="menuUrl" type="text" class="layui-input" name="menuUrl" placeholder="请添加菜单图标"></td>
		</tr>
	</table>
</div>
</html>